<template>
    <v-app id="inspire" class="app dashboard">
        <!-- <v-app-bar app clipped-left> -->
        <v-app-bar app color="purple">
            <v-app-bar-nav-icon
                @click.stop="drawer = !drawer"
                color="white"
                hide-on-scroll="true"
            ></v-app-bar-nav-icon>
            <!-- <v-toolbar-title>新印相开放平台</v-toolbar-title> -->
        </v-app-bar>
        <PageHeader :drawer="drawer" @routePath="routerPath" />
        <v-content>
            <PageBreadcrumbs />

            <div class="page-wrapper">
                <router-view></router-view>
            </div>

            <v-footer height="auto" class="white pa-3 app--footer">
                <span>&copy; 2019</span>
            </v-footer>
            <PageBackTop />
        </v-content>
    </v-app>
</template>

<script lang='ts'>
import { Vue, Prop, Component } from 'vue-property-decorator';
import PageHeader from '@/components/pageDrawer/index';
import PageBreadcrumbs from '@/components/pageBreadcrumbs/index';
import PageBackTop from '@/components/pageBackTop/index';
@Component({
    components: {
        PageHeader,
        PageBackTop,
        PageBreadcrumbs,
    },
})
export default class DefauleLayout extends Vue {
    @Prop({
        type: String,
        default: '',
    })
    private source!: string;

    private drawer: boolean = true;
    private created() {
        this.$vuetify.theme.dark = false;
    }
    private routerPath(routePath: string) {
        if (routePath === this.$route.path) {
            return;
        }
        if (routePath === '/') {
            if (this.$route.path === '/dashboard') {
                return;
            } else {
                this.$router.push({ path: '/' });
            }
        } else {
            this.$router.push({ path: routePath });
        }
    }
}
</script>
<style scoped>
.page-wrapper {
    min-height: calc(100vh - 64px - 50px - 57px);
}
</style>
